<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <!-- <button v-on:click='fn'>按钮</button> -->
        <!-- <button v-for='i in 6' :key='i' v-on:click='fn2(i,$event)'>按钮{{i}}</button> -->
        <button v-for='i in 6' :key='i' @click='fn2(i,$event)'>按钮{{i}}</button>

        <button @click='fn3'> 按钮666</button>

        <div @click.self='fn2' style='padding:30px'>
          <h2>哈哈哈</h2>
        </div>

        <input type="text" v-model='name' @keydown.qqq='submit'>
    </div>
</body>
</html>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    /* 
      v-on 专门用来绑定事件的一个指令 v-on:事件名 = "函数名"   v-on: 简写@
      v-on:click='fn'  默认会把 事件对象e传给fn函数
      v-on:click='fn()' 一个实参都没有
      v-on:click='fn(1,2,3)'  一个吧三个实参传给fn
      v-on:click='fn(1,$event,2,3)'  把1 e 2 3 四个实参传给了 fn函数；,$event Vue规定的一个词汇

      事件修饰符
        @click.stop = 'fn'  阻止冒泡 等同于 在fn函数中编写 e.stopPropagation();
        @click.prevent = 'fn'  阻止默认 e.preventDefault()
        @click.once = 'fn'  fn只会执行一次
        @click.self = 'fn'  只有当点击 元素本身的时候 才会执行fn

      按键修饰符
        @keydown.enter = 'fn' 只有当按键是回车键的时候 才会触发该函数  

    */
    Vue.config.keyCodes.qqq = 81
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            fn(){
              // this 不是当前实例
              console.log(666,this)
            },
            flag:true
        },
        methods: {
          // 这里放置的都是函数, 函数中的this都是当前实例
          fn2(n,e){
            // e.stopPropagation();
            // e.preventDefault()
            this.name = 'hahaha'
            console.log(arguments)
            console.log(888,this)
          },
          fn3(){
            if(!this.flag)return
            this.flag = false;
            console.log('fn3')
          },
          submit(e){
            // console.log(e)
            // if(e.keyCode ==13){
              console.log(this.name)
            // }
          }
        },
    });
</script>